<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div  id="app">
			
			<table >
				 <tr>
					 <td>学号</td>
					 <td>姓名</td>
					 <td>性别</td>
					 <td>操作</td>
				 </tr>
				 				 
				 <tr v-for="(item,index) in stuList">
					 <td>{{item.id}}</td>
					 <td>{{item.name}}</td>
					 <td>{{item.sex}}  
					    <img v-if="item.sex==='男'" src="images/man.png">
						<img v-else src="images/woman.png">
					 </td>
					 <td>
						 <button v-on:click="removeFunc(index)">删除</button>
					 </td>
				 </tr>
			</table>
			
		</div>
		
	</body>
	
	<!-- 引入vue核心文件(编译引擎) -->
	<script src="js/vue.js"></script>
	
	<script>
		//实例化vue对象
		var app = new Vue({
		  //vue引擎要管理的html节点在哪里 el--> element
		  el: '#app',
		  //vue管理内部私有的数据
		  data: {
		    stuList: [
				{id:1001, name: '小张',sex:'男'},
				{id:1002, name: '小王', sex:'女'}
			]
		  },
		  //自定义方法
		  methods: {
			  //删除操作
			  removeFunc(index) {
				  //删除这一行数据
				  this.stuList.splice(index,1)
			  }
		  }
		})
		
	</script>
</html>